<template>
  <div class="cart">
    <div class="row flex head">
      <div class="cell f1">
        <!-- <i class="iconfont icon-yduifuxuankuangxuanzhong"></i> -->
        <!-- <i
          class="iconfont"
          :class="
            ischeckAll
              ? 'icon-yduifuxuankuangxuanzhong'
              : 'icon-yduifuxuankuang'
          "
          @click="checkAll()"
        ></i> -->
        <CheckAll @check="checkAll" :isChecked="ischeckAll"></CheckAll>
      </div>
      <div class="cell f4">礼品信息</div>
      <div class="cell f2">兑换分数</div>
      <div class="cell f3">数量</div>
      <div class="cell f2">小计</div>
      <div class="cell f1">操作</div>
    </div>
    <div class="row flex item" v-for="item in CartList" :key="item.id">
      <div class="cell f1">
        <!-- <i
          class="iconfont"
          :class="
            item.isChecked
              ? 'icon-yduifuxuankuangxuanzhong'
              : 'icon-yduifuxuankuang'
          "
          @click="checkSlfe(item)"
        ></i> -->
        <CheckAll
          @check="checkSlfe"
          :isChecked="item.isChecked"
          :item="item"
        ></CheckAll>
      </div>
      <div class="cell f4">
        <div class="msg flex">
          <img :src="item.coverImg | srcFormat" alt="" />
          <div class="info">
            <p>{{ item.title }}</p>
            <p class="color">{{ item.versionDescription }}</p>
          </div>
        </div>
      </div>
      <div class="cell f2">{{ item.coin }}鸡腿</div>
      <div class="cell f3">
        <div class="step flex">
          <span @click="reduce(item, $event)">-</span>
          <input type="text" v-model="item.total" />
          <span @click="add(item, $event)">+</span>
        </div>
      </div>
      <div class="cell f2">{{ item.coin * item.total }}鸡腿</div>
      <div class="cell f1">
        <input class="btn" type="button" value="删除" @click="del(item)" />
      </div>
    </div>
    <div class="total flex">
      <p>
        总计：<span>{{ totalPrice }} 鸡腿</span>
      </p>
      <div class="submit">提交</div>
    </div>
    <Confirm ref="confirm" msg="确定删除吗?" @sure="deleteItem()"></Confirm>
  </div>
</template>
 
<script>
import CheckAll from "../../utils/CheckAll";
import Confirm from "../common/Confirm";
import { selectCartApi, deleteCartApi, AddCartApi } from "../../http/api";
import { toast } from "../../utils/toast";
export default {
  components: { Confirm, CheckAll },
  data() {
    return {
      CartList: [],
      deleteId: 0,
    };
  },
  created() {
    this.getCartData();
  },
  methods: {
    async getCartData() {
      const res = await selectCartApi();
      console.log(res);
      this.CartList = res.data.map((el) => {
        el.isChecked = false;
        return el;
      });
    },
    checkAll() {
      let result = !this.ischeckAll;
      this.CartList.forEach((el) => (el.isChecked = result));
    },
    checkSlfe(item) {
      item.isChecked = !item.isChecked;
    },
    reduce(item,event) {
      if (item.total <= 1) return toast("不能少于1件", "warning");
      item.total--;

      clearTimeout(event.target.timer);
      event.target.timer = setTimeout(() => {
        AddCartApi({
          productId: item.id,
          total:item.total,
          modified:1
        });
      }, 1000);
    },
    add(item, event) {
      if (item.total >= 5) return toast("限购5件", "warning");
      item.total++;
      // 判断点击的次数
      // 如果有，就++，如果没有就让他等于1
      if (event.target.temp) {
        event.target.temp++;
      } else {
        event.target.temp = 1;
      }

      // 防抖：多次触发同个事件，只会执行最后那次
      // 1.注册事件
      // 2.延迟调用
      // 3.取消上次
      clearTimeout(event.target.timer);
      event.target.timer = setTimeout(() => {
        AddCartApi({
          productId: item.id,
          total: event.target.temp
          
        }).then((res) => {
          if (res.code === 0) {
            // 请求完成之后，清空temp
            event.target.temp = 0;
          }
        });
      }, 1000);
    },
    del(item) {
      // console.log(this.$refs);
      this.$refs.confirm.show();
      this.deleteId = item.id;
    },
    deleteItem() {
      console.log(this.deleteId);
      deleteCartApi(this.deleteId).then((res) => {
        if (res.code === 0) {
          const index = this.CartList.findIndex(
            (el) => el.id === this.deleteId
          );
          this.CartList.splice(index, 1);
          toast("刪除成功", "success");
          this.$refs.confirm.hide();
          this.$store.commit("updateTopHeadKey");
        } else {
          toast("删除失败", "denger");
        }
      });
    },
  },
  computed: {
    ischeckAll() {
      return (
        this.CartList.filter((el) => el.isChecked).length ===
        this.CartList.length
      );
    },
    totalPrice() {
      return this.CartList.reduce((prev, current) => {
        return (prev += current.isChecked ? current.total * current.coin : 0);
      }, 0);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.cart {
  margin-bottom: 30px;
  .iconfont {
    color: #0a328e;
  }
  .f1 {
    flex: 1;
  }
  .f2 {
    flex: 2;
  }
  .f3 {
    flex: 3;
  }
  .f4 {
    flex: 4;
  }
  .head {
    height: 60px;
    background-color: #e7e7e7;
    text-align: center;
    line-height: 60px;
    color: #666;
    border: 1px solid #ccc;
    border-bottom: 0 solid #000;
  }
  .item {
    height: 120px;
    line-height: 120px;
    padding: 10px 0;
    text-align: center;
    border: 1px solid #ccc;
    border-top: 0 solid #000;
    .cell {
      .msg {
        margin-top: 16px;
        img {
          width: 80px;
          height: 90px;
          margin-right: 16px;
        }
        .info {
          margin-top: 12px;
        }
        p {
          line-height: 30px;
          &.color {
            font-size: 14px;
            color: #666;
          }
        }
      }
      .step {
        margin-top: 46px;
        margin-left: 70px;
        text-align: center;
        span {
          border: 1px solid #ccc;
          width: 26px;
          height: 26px;
          line-height: 26px;
          cursor: pointer;
          user-select: none;
        }
        input {
          width: 36px;
          height: 26px;
          border: 1px solid #ccc;
          text-align: center;
          padding: 0;
          border-left: 0 solid #000;
          border-right: 0 solid #000;
          outline: none;
        }
      }
      .btn {
        border: 0;
        padding: 6px 10px;
        cursor: pointer;
      }
    }
  }
  .total {
    flex-direction: column;
    align-items: flex-end;
    p {
      font-size: 22px;
      padding: 20px 0;
      span {
        color: red;
      }
    }
    .submit {
      width: 120px;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      background-color: #0a328e;
    }
  }
}
</style>